<template>
	<view class="p30">
		<!-- 暂无-->
		<view class="tc mt140 fs30 animation-scale-down" style="color: #B6B6B6;" v-if="!list.length">
			<view class="">当前暂无银行卡，快去添加吧~</view>
		</view>
		<!-- 列表 -->
		<view class="h220 radius20 p20 mb20 pr ov-h" @click="click(item)" :style="[{background:colorList[item.method]+'ee'}]"
			@longpress="del(item.id)" v-for="(item,index) in list" :key="index">
			<!-- <image :src="$baseUrl+item.image" class="bank-watermark"></image> -->
			<u-icon :name="iconList[item.method]" :color="colorList[item.method]" size="120"  class="bank-watermark" />
			<!-- <image :src="$baseUrl+item.image" class="wh-max pa top0 left0" style="" mode="aspectFill"></image> -->
			<view class="pr z-index2">
				<view class="flex">
					<view class="p14 bg-fff radius">
						<u-icon :name="iconList[item.method]" :color="colorList[item.method]" size="70" />
					</view>
					<view class="color-fff ml30">
						<view class="fs30 fw-500 mb10">{{methodList[item.method]}}</view>
						<view class="">{{item.username}}</view>
					</view>
				</view>
				<view class="fs38 fw-700 color-fff mt30 tr ">
					<text class="mr30">****</text>
					<text class="mr30">****</text>
					<text class="mr30">****</text>
					<text>{{item.account&&item.account.slice(-4)}}</text>
				</view>
			</view>
		</view>
		<view class="h120"></view>
		<view class="pf left0 bottom0 w-max p20 h120 z-index2">
			<u-button type="error" class="w-max" @click="$u.route('/pages/my/balance/bankAdd')">新增新账户</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				methodList: {
					"wechat": '微信',
					"alipay": '支付宝',
					"bank": '银行卡',
				},
				iconList: {
					"wechat": 'weixin-fill',
					"alipay": 'zhifubao',
					"bank": 'coupon-fill',
				},
				colorList: {
					"wechat": '#1bad1a',
					"alipay": '#2594c9',
					"bank": '#bab264',
				},
				list: '',
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			click(item) {
				if (this.$params.type) {
					uni.$emit('setAccount', item)
					this.$navBack()
				} else {
					// this.$u.route('/pages/my/wallet/look', item)
				}
			},
			getList() {
				this.$request('/member/withdraw/accountList', this.$params).then(res => {
					this.list = res.data.data
				})
			},
			del(ids) {
				this.$showModal('删除').then(res => {
					this.$request('/member/withdraw/accountDel', {
						ids,
						...this.$params
					}).then(res => {
						this.$msg(res.msg)
						this.getList()
					})
				})
			},
		}
	}
</script>

<style scoped lang="scss">

	.bank-watermark {
		position: absolute;
		right: 60rpx;
		bottom: -30rpx;
		width: 120rpx;
		height: 120rpx;
		filter: grayscale(100%) brightness(400%);
		opacity: 0.1;
	}

	.animation-scale-down {
		animation-name: scale-down
	}

	@keyframes scale-down {
		0% {
			opacity: 0;
			transform: scale(1.8)
		}

		100% {
			opacity: 1;
			transform: scale(1)
		}
	}
</style>
